<template>
  <div id="authenticationOk">
    <div class="box">
      <img
        src="http://tsyx-rights-and-interests.oss-cn-hangzhou.aliyuncs.com/img/authenticationOk.png"
        alt=""
        class="waitImg"
      />
      <p>认证成功</p>
      <h4>恭喜您获得全年的加油券</h4>
    </div>
    <div class="showAll">
      <div class="title">
        您有<span class="red">11张</span>卡券发送到 &nbsp;&nbsp;&nbsp;<span
          class="red"
          >首页专属卡中</span
        >
        <i @click="toRule">使用规则</i>
      </div>
      <div class="backIndex" @click="toMyCard">查看详情</div>
    </div>
    <div class="back" @click="backIndexButton">回首页></div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    backIndexButton() {
      this.$router.push({name: 'index'});
    },
    toRule() {
      console.log("使用规则");
      // this.$router.push("/index");
    },
    toMyCard(){
      this.$router.push({
        name: 'myCard',
        params: { id: 2 },
      });
        // this.$router.push("/myCard?id=2");
    }
  },
  created() {},
};
</script>

<style lang='scss' scoped>
#authenticationOk {
  text-align: center;
  padding-top: 1rem;
}
.box {
  .waitImg {
    width: 30%;
  }
  p,
  h4 {
    font-weight: 400;
  }
  p {
    font-size: 0.5rem;
  }
  h4 {
    font-size: 0.3rem;
  }
}

.showAll {
  width: 90%;
  margin: auto;
  height: 5rem;
  background-image: url(https://tsyx-rights-and-interests.oss-cn-hangzhou.aliyuncs.com/background/authenticationOkImg.png);
  background-size: 100%;
  background-repeat: no-repeat;
  .title {
    padding-top: 0.7rem;
    width: 100%;
    .red {
      color: #c71f34;
      font-weight: 700;
    }
    i {
      display: inline-block;
      color: #f58520;
      background: rgba(245, 133, 32, 0.1);
      border: 1px solid #f58520;
      font-style: normal;
      font-size: 0.2rem;
      border-radius: 22px;
      margin-left: 0.2rem;
      padding: 0 0.1rem;
    }
  }
  .backIndex {
    display: inline-block;
    margin-top: 1.5rem;
    padding: 0.3rem 2.5rem;
    border: 1px solid #c41e34;
    color: #c41e34;
    border-radius: 1rem;
    font-weight: 700;
    font-size: 0.4rem;
  }
}
.back {
  color: #ccc;
}
</style>